import React from 'react';
import './index.css';
import {connect} from 'react-redux';
import {getSearchResult} from '../../store/search.redux';
import {setSongList} from '../../store/player.redux';
import music from '../../assets/img/music.png';
@connect((state)=>({
  hot:state.search.hot,
  page:state.search.page,
  songList:state.search.songList
}),{
  getSearchResult,setSongList
})
class Search extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showHistory:false,
      showSongList:false,
      isSearch:false,
      hotSearch:true,
      history:JSON.parse(localStorage.getItem('search_text')) || []
    };
  }
  searching=(event)=>{
    this.refs.ipt.style.width="88%";
    this.setState({
      showHistory:true,
      hotSearch:false
    })
  }
  write=(event)=>{
    const self = event.target;
    if(self.value.trim().length>0){
      this.setState({
        isSearch:true
      })
    }else{
      this.setState({
        isSearch:false
      })
    }
  }
  quxiao=()=>{
    this.refs.ipt.style.width="96%";
    this.setState({
      showSongList:false,
      hotSearch:true,
      showHistory:false
    })
  }
  find=()=>{
    this.props.getSearchResult(this.refs.searchInput.value);
    this.setState({
      showSongList:true,
      hotSearch:false
    })
    this.saveHistory(this.refs.searchInput.value);
  }
  selectHot=(t)=>{
    this.saveHistory(t);
    this.props.getSearchResult(t);
    this.refs.ipt.style.width="88%";
    this.setState({
      showSongList:true,
      hotSearch:false
    })
  }
  saveHistory=(text)=>{
    const list = JSON.parse(localStorage.getItem('search_text')) || [];
    if(list.indexOf(text)===-1){
      list.push(text);
    }
    this.setState({
      history:list
    })
    localStorage.setItem('search_text',JSON.stringify(list));
  }
  removeRecord=()=>{
    localStorage.removeItem('search_text');
    this.setState({
      history:[],
      showHistory:false,
      hotSearch:true
    })
  }
  readRecord=(t)=>{
    this.setState({
      showSongList:true,
      hotSearch:false,
      showHistory:false
    })
    this.props.getSearchResult(t);
  }
  goPlayer=(songMid)=>{
    //1.将当前歌单存储到player.redux中,用于在播放的时候可以切歌
    this.props.setSongList(this.props.songList);
    //2.跳转到播放页
    this.props.history.push('/player/'+songMid);
  }
  render() {
    return (
      <div className="searchBox">
        <div className="iptBox">
          <div className="ipt" ref="ipt">
            <span className="iconfont icon-sousuo" id="search"></span>
            <input type="search" placeholder="搜索歌曲、歌单、专辑" id="searchInput" ref="searchInput"
              onFocus={this.searching} onChange={this.write} />
          </div>
          <p className="callOff" hidden={this.state.isSearch} onClick={this.quxiao}>取消</p>
          <p className="callOff search_btn" hidden={!this.state.isSearch} onClick={this.find}>搜索</p>
        </div >
        <div className="searchBar" v-show="!showSongList">
          <div className="search_hisTory" hidden={!this.state.showHistory}>
            <div className="search_hisTory_box">
              {
                this.state.history.map((h,i)=>{
                  return (
                    <p key={i} onClick={() => this.readRecord(h)}>
                        {h}
                    </p>
                  )
                })
              }
              <h1 onClick={this.removeRecord} v-show="searchRecord.length>0">删除历史搜索记录</h1>
            </div>
          </div >
          <div className="hotsearch" hidden={!this.state.hotSearch}>
            <h2 className="hotsearch_title">热门搜索</h2>
            <div className="hot_sea">
              {
                this.props.hot.map((h,i)=>{
                  return <span className={i===0?'on':''} onClick={() => this.selectHot(h)} key={i}>
                    {h}
                  </span>
                })
              }
            </div>
          </div >
        </div >
        <div className="search_songList" hidden={!this.state.showSongList}>
          <ul>
            {
              this.props.songList && this.props.songList.map((song,index)=>{
                return (
                    <li onClick={()=>this.goPlayer(song.songMid)} key={song.songId}>
                        <img src={music} style={{width:'0.8rem',height:'0.8rem',marginTop:'22px'}} alt=""/>
                        <div className="search_song_name">
                          <p className="search_song_name1">{song.songName}</p>
                          <p className="search_song_name2">
                            {
                              song.singer.map(s=>{
                                return (
                                  <span key={s.singerMid}>
                                    {s.singerName}
                                  </span>
                                )
                              })
                            }
                          </p>
                        </div>
                        <span>{index+ 1}</span>
                      </li>
                )
              })
            }
            
          <li v-show="isEnd" className="isEnd">
            已经到底啦~
          </li>
        </ul>
      </div>
  </div >
  )
  }
}

export default  Search;